'use client';

import { Spinner } from "@/components/spinner";
import { Button } from "@/components/ui/button";
import { SignInButton } from "@clerk/clerk-react";
import { useConvexAuth } from "convex/react";
import { ArrowRight } from "lucide-react"
import Link from "next/link";

export const Heading = () => {
    const { isAuthenticated, isLoading } = useConvexAuth()
    return (
        <div className="max-w-3xl space-y-4 dark:bg-[#1F1F1F]">
            <h1 className="text-3xl sm:text-5xl md:text-6xl">
                Your Ideas,Documents, & Plans. Unified. Welcome to
                <span className="underLine">
                    Jotion
                </span>
            </h1>
            <h3 className="text-base sm:text-xl md:text-2xl font-medium">
                Jotion is the connected workspace where <br />
                better, faster work happens
            </h3>

            {isLoading && <div className="mx-auto flex items-center justify-center"><Spinner size={"lg"} /></div>}
            {isAuthenticated && !isLoading &&
                (<>
                    <Button asChild>
                        <Link href={"/documents"}>
                            Enter Jotion
                            <ArrowRight className="h-4 w-4 ml-2" />
                        </Link>
                    </Button>
                </>
                )
            }
            {!isAuthenticated && !isLoading &&
                (<>
                    <SignInButton mode="modal">
                        <Button asChild>
                            <Link href={"/documents"}>
                                Enter Jotion
                                <ArrowRight className="h-4 w-4 ml-2" />
                            </Link>
                        </Button>
                    </SignInButton>

                </>
                )
            }


        </div>
    );
}